/*!
 *
 */

*{
  padding:0;
  margin:0;
  border:0;
  outline:0;
  box-sizing:border-box;
  font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
html{
    width:100%;
    height:100%;
}
body{
    overflow-y: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body, #root {
    width: inherit;
    height: inherit;
    display:flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}
input,select,button,textarea {
    outline: none;
    padding: 2px 0 2px 3px;
}
a {
    text-decoration: none;
}
.fal,.fas,.fab,.far {
    display: inline;
}
::-webkit-scrollbar {
    width: 0;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
}
/**/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input:-moz-placeholder,
textarea:-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #eee;
}
@logo-background:#282A32;
@logo-bottom-color:#1C1D22;
@header-background:#FFF;
@header-height:50px;
@header-bottom-color:#EEE;
@header-top-color:#EEE;
@menu-nav-color:#666;
@menu-nav-width:46px;
@header-hover-background:#F9F9F9;
@side-width:210px;
@side-background:#282A32;
@menu-fold-unit-height:44px;
@menu-fold-unit-color:#DDD;
@menu-fold-unit-color-hover:#FFF;
@menu-fold-unit-background:#1C1D22;
@menu-sub-height:34px;
@menu-sub-background:#FFF;
@menu-sub-width:100px;
@crumb-height:40px;
@crumb-color:#888;
@crumb-background:#FFF;
@crumb-hover-color:#666;
@list-th-background:#F8F8F8;
@list-border-color:#EEE;
@list-tr-height:44px;
@input-height:38px;
@badge-background:#F33;
@card-background:#FFF;
@not-found-color:#CCC;
@area-background:#F5F5F5;
/*溢出隐藏*/
.hidden {
  overflow: hidden;
}
/*溢出滚动*/
.scroll {
    overflow: auto;
}
.scroll-y {
  overflow-y: auto;
}
.scroll-x {
  overflow-x: auto;
}
/*自动填充空间*/
.allow-grow {
    flex-grow: 1;
}
/*禁止自动填充空间*/
.forbid-grow {
    flex-grow: 0;
}
/*允许收缩*/
.allow-shrink {
    flex-shrink: 1;
}
/*禁止收缩*/
.forbid-shrink {
    flex-shrink: 0;
}
/*布局组件,垂直布局和水平布局*/
.flex {
    display:flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-shrink: 1;
}
/*水平布局*/
.horizontal {
    &:extend(.flex);
    flex-direction: row;
}
.horizontal-auto {
    &:extend(.horizontal);
    &:extend(.allow-grow);
}
/*垂直布局*/
.vertical {
    &:extend(.flex);
    flex-direction: column;
}
.vertical-auto {
    &:extend(.vertical);
    &:extend(.allow-grow);
}
/*向右浮动*/
.float-right {
    float:right;
    margin-right:.2rem;
}
/*居中*/
.middle {
    justify-content: center;
    align-items: center;
}
/*禁止选中文字*/
.forbid-select {
    user-select: none;
}
/*Header组件*/
.header {
    height:@header-height;
    background-color:@header-background;
    box-shadow: 0 1px 1px @header-bottom-color;
    border-bottom: solid 1px @header-bottom-color;
    flex-grow: 0;
    justify-content: flex-start;
}
/**
 * 面包屑组件
 */
.crumb {
    width: inherit;
    height: @crumb-height;
    line-height: @crumb-height;
    text-indent: 10px;
    font-size: 14px;
    color: @crumb-color;
    background-color: @crumb-background;
}
.crumb-slash {
    margin-right:5px;
    margin-left:5px;
}
.crumb a, .crumb span {
    color: inherit;
}
.crumb [href]:hover {
    color: @crumb-hover-color;
}
/*Logo组件*/
.logo{
    width:@side-width;
    height:@header-height;
    border-bottom:solid 1px @logo-bottom-color;
}
.logo-text {
    line-height: @header-height;
    text-align: center;
    color: #EEE;
    font-size: 30px;
    background: @logo-background;
}
/*请求异常页面*/
.not-found {
    &:extend(.vertical-auto);
    &:extend(.middle);
    &:extend(.forbid-select);
    font-weight: bold;
    color: @not-found-color;
    margin-top: -200px;
}
.not-found .code {
    font-size: 160px;
}
.not-found .msg {
    font-size: 34px;
}
/*空间容器,溢出滚动*/
.area {
    &:extend(.vertical-auto);
    &:extend(.scroll-y);
    height: 0;
    background-color: @area-background;
}
/*面板容器,适应方向*/
.panel {
    margin: 0;
    background-color: @card-background;
}
/*外边距*/
.margin {
    margin: 10px 10px 0 10px;
}
/*内边距*/
.padding {
    padding: 15px;
}
/*侧边容器*/
.side {
    &:extend(.hidden);
    &:extend(.vertical);
    &:extend(.forbid-select);
    width: @side-width;
    background-color:@side-background;
    transition: width 100ms ease-out;
}
.side.hide {
    width: 0;
    transition: width 100ms ease-out;
}
/*导航菜单*/
.menu-nav {
    display:inline-block;
    height:inherit;
    color:@menu-nav-color;
    list-style:none;
}
.menu-nav-li:first-child {
  margin-left: 5px;
}
.menu-nav-li {
    position: relative;
    display:inline-block;
    float:left;
    height:inherit;
    width:@menu-nav-width;
    text-align: center;
    line-height:@header-height;
    cursor:pointer;
    font-size:16px;
}
.menu-nav-span {
    display: block;
    margin: 0;
}
.menu-nav-li:hover {
  background-color: @header-hover-background;
}
.menu-nav-li a {
    color: inherit;
}
  /*个人中心子菜单*/
.menu-nav-li:hover .menu-sub {
    display: inline-block !important;
}
/*折叠菜单容器*/
.menu-fold {
    &:extend(.scroll-y);
    &:extend(.allow-grow);
    height: 0;
}
/*折叠菜单*/
.menu-fold-unit
{
    width: inherit;
    max-height: @menu-fold-unit-height;
    overflow-y: hidden;
    transition: max-height 150ms ease-out;
}
.menu-fold-unit.active {
    max-height: 500px;
    transition: max-height 200ms ease-in;
}
.menu-fold-unit ul {
    height: auto;
    background:@menu-fold-unit-background;
}
.menu-fold-unit ul li {
    text-indent: 40px;
}
.menu-fold-unit div {
    position: relative;
    text-indent: 18px;
}
.menu-fold-unit div .angle {
    position: absolute;
    right: 20px;
}
.menu-fold-unit div i:before{
    font-size:15px;
}
.menu-fold-unit div, .menu-fold-unit ul li a {
    display: block;
    height: @menu-fold-unit-height;
    line-height: @menu-fold-unit-height;
    color: @menu-fold-unit-color;
    cursor: pointer;
    font-size: 15px;
}
.menu-fold-unit div:hover, .menu-fold-unit ul li:hover, .menu-fold-unit ul li a:hover {
    color:@menu-fold-unit-color-hover;
}
/*附属菜单*/
.menu-sub {
    position: absolute;
    top: @header-height + 2;
    right: 0;
    width: @menu-sub-width;
    height: auto;
    padding-top:7px;
    padding-bottom: 7px;
    line-height: normal;
    overflow-y: hidden;
    border-radius: 3px;
    box-shadow: 0 0 2px #999;
    background-color: @menu-sub-background;
    display: none;
}
.menu-sub li {
    display: inline-block;
    width: inherit;
    height: @menu-sub-height;
    line-height: @menu-sub-height !important;
    font-size: 13px;
    text-indent: 7px;
}
.menu-sub li:hover {
    background-color: #F9F9F9;
}
.menu-sub a {
    color: inherit;
}
/*列表容器*/
.list {
    margin: 0;
    font-size: 14px;
    color: #555;
    border: solid 1px @list-border-color;
    overflow-x: auto;
}
.list table {
    display: table;
}
.list tbody {
    overflow-x: auto;
}
.list tr {
    height: @list-tr-height;
    transition: height 200ms;
}
.list tr:hover {
    height: @list-tr-height + 16;
    transition: height 200ms;
}
.list th {
    font-weight: normal;
    background-color: @list-th-background;
}
.list td {
    border-top:solid 1px #EEE ;
    width: 300px;
}
.list td,.list th {
    position: relative;
    padding-left: 10px;
    text-align: left;
    height: @list-tr-height;
    border-right:solid 1px @list-border-color;
}
/*form表单*/

.checkbox {
    &:extend(.forbid-select);
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 14px;
    padding: 2px;
    text-align: center;
    color: #555;
    background-color: #FFF;
    border: solid 1px #AAA;
    font-size: 13px;
    transition: all 300ms;
    cursor: pointer;
}
.checkbox.active {
    color: #FFF;
    transition: all 300ms;
    &:extend(.checkbox-theme-blue);
}
/*checkbox红色主题*/
.checkbox-theme-red {
    border-color: #FF6666 ;
    background-color: #FF9999;
}
/*checkbox蓝色主题*/
.checkbox-theme-blue {
    border-color: #9798ff;
    background-color: #97a1ff;
}
/*checkbox黑色主题*/
.checkbox-theme-black {
  border-color: #888;
  background-color: #999;
}
.input, select {
    width: 100%;
    height: @input-height;
    color:#888;
    border: 1px solid #E5E5E5;
    background-color: #FFF;
    transition: all 300ms;
}
.input:focus {
    color: #555;
    border-color: #BBB;
}
label {
    font-size: 14px;
    color: #666;
}
label .title {
    line-height: 36px;
}
/*徽章*/
.badge {
    position: absolute;
    display: inline-block;
    background-color: @badge-background;
}
/*徽章方正*/
.badge-square {
    top: 6px;
    right: 7px;
    min-width: 14px;
    height: 16px;
    line-height:16px;
    text-align: center;
    font-size: 12px;
    color: #FFF;
    border-radius: 3px;
    padding: 0 1px;
}
/*徽章圆点*/
.badge-dot {
    width: 6px;
    height: 6px;
    top: 10px;
    right: 10px;
    border-radius: 30px;
}
/* width >768 && width < 940 */
@media screen and (max-width:940px) {
    /*并排2格*/
    .side {
        width: 0 !important;
        transition: width 100ms ease-out;
    }
}
/* width > 450 && width < 768 */
@media screen and (max-width:768px) {
    /*并排1格*/
}
/* width < 450*/
@media screen and (max-width:450px) {

}